<template>
  <div class="Bur_AlarmBottom">
    <div class="Bur_AlarmBottomcontent">
      <div class="Bur_AlarmBottomInfo">
        <div class="GateControl">
          <div class="GateControlImg"></div>
          <div class="GateControlProcess">
            <progressBar :params="params"></progressBar>
          </div>
          <div class="GateControlContent">
            <div
              id="container"
              style="height: 250.69px; background: transparent"
            ></div>
          </div>
        </div>
        <div class="EmergencyAssistance">
          <div class="EmergencyAssistanceImg"></div>
          <div class="EmergencyAssistanceProcess">
            <progressBar :params="paramsEm"></progressBar>
          </div>
          <div class="EmergencyAssistanceContent">
            <div id="main"></div>
          </div>
        </div>
        <div class="ElectronicPatrol">
          <div class="ElectronicPatrolImg">
            <div class="cutChart">
              <el-tooltip :content="isSwitch" placement="top">
                <el-switch
                  v-model="isSwitch"
                  active-color="#13ce66"
                  inactive-color="#4BF3F9"
                  active-value="周记录"
                  inactive-value="日记录"
                >
                </el-switch>
              </el-tooltip>
            </div>
          </div>
          <div class="ElectronicPatrolProcess">
            <progressBar :params="paramsEl"></progressBar>
          </div>
          <div class="ElectronicPatrolContent">
            <div class="hx_mainImg" v-show="isSwitch === '日记录'">
              <div class="hx_imgText">巡更数</div>
            </div>
            <div id="hx_main"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HighCharts from "highcharts";
import progressBar from "../common/progressBar.vue";
import { sxfx } from '../../utils/api'
export default {
  components: {
    progressBar,
  },
  data() {
    return {
      aqDzglStatus: {},
      isSwitch: "日记录",
      // 道闸管理
      params: {
        leftBottomValue: "报警", //左上文字
        leftTopValue: 30, //左侧数字
        rightBottomValue: "总数", // 右侧文字
        rightTopValue: 50, // 右侧数字
        showMiddleTop: false,
        middleTopText: "", // 中间文字
        middleTopValue: "", // 中间总数
        leftNumberColor: "#C936E8", // 左侧数字颜色
        rightNumberColor: "#ffffff", // 右侧数字颜色
        activeColor: "#C936E8",
        ins: 0,
        outs: 0,
      },
      // 紧急求助
      paramsEm: {
        leftBottomValue: "报警", //左上文字
        leftTopValue: 30, //左侧数字
        rightBottomValue: "总数", // 右侧文字
        rightTopValue: 50, // 右侧数字
        middleTopText: "", // 中间文字
        middleTopValue: "", // 中间总数
        leftNumberColor: "#FF3B3B", // 左侧数字颜色
        rightNumberColor: "#ffffff", // 右侧数字颜色
        activeColor: "#FF3B3B",
      },
      // 电子巡更
      paramsEl: {
        leftBottomValue: "报警", //左上文字
        leftTopValue: 30, //左侧数字
        rightBottomValue: "总数", // 右侧文字
        rightTopValue: 50, // 右侧数字
        middleTopText: "", // 中间文字
        middleTopValue: "", // 中间总数
        leftNumberColor: "#4BF3F9", // 左侧数字颜色
        rightNumberColor: "#ffffff", // 右侧数字颜色
        activeColor: "#4BF3F9",
      },

      // 时效分析
      xdate:[],
      normal:[],
      omission:[],

      myEMChart: null,
      myHXChart: null,
      myEPWeekChart: null,
    };
  },
  watch: {
    isSwitch() {
      this.hxCharts();
    },
  },
  mounted() {
    sxfx().then((response)=>{
      let that = this;
      var list = response.data.list;
      for(var i =0;i<list.length;i++){
        that.xdate.push(list[i].date.substring(5,10));
        that.normal.push(parseInt(list[i].normal))
        that.omission.push(parseInt(list[i].omission))
      }
    })
    this.getPie();
    this.initCharts();
    this.hxCharts();
    // 创建渐变色
    var colors = ["#00a8ff", "#9966cc"];
    HighCharts.getOptions().colors = HighCharts.map(colors, function (color) {
      return {
        radialGradient: { cx: 0.1, cy: 0.6, r: 0.8 },
        stops: [
          [0, color],
          [1, HighCharts.Color(color).brighten(-0.5).get("rgb")], // darken
        ],
      };
    });
  },
  methods: {
    // 道闸管理
    getPie() {
      let that = this;
      HighCharts.chart("container", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0,
          },
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 50,
            dataLabels: {
              enabled: true,
              format: "<b>{point.name}</b>: {point.percentage:.1f} %",
              style: {
                color:
                  (HighCharts.theme && HighCharts.theme.contrastTextColor) ||
                  "white",
                fontSize: "20px",
              },
              connectorColor: "silver",
            },
            //显示图例
            showInLegend: true,
          },
        },
        legend: {
          symbolPadding: 20,
          layout: "vertical",
          align: "right",
          itemHoverStyle: {
            color: "#ffffff",
          },
          symbolRadius: 0,
          x: -100, //距离x轴的距离
          y: -90, //距离Y轴的距离
          itemStyle: {
            color: "#ffffff",
            fontWeight: "bold",
            fontSize: 20,
          },
        },
        tooltip: {
          headerFormat: '<span style="font-size: 26px">{point.key}</span><br/>',
          style: {
            fontSize: 26,
          },
        },
        series: [
          {
            name: "道闸进出数量",
            data: [
              ["进入", that.params.ins],
              ["外出", that.params.outs],
              // ["进入", 10],
              // ["外出", 20],
            ],
          },
        ],
      });
    },
    //饼状图--紧急求助
    initCharts() {
      let that = this;
      if (this.myEMChart !== null) {
        this.myEMChart.dispose();
      }
      this.myEMChart = this.$echarts.init(document.getElementById("main"));
      var colors = ["#FF7676", "#41C1FF"];
      var option = {
        label: {
          color: "#fff",
        },
        tooltip: {
          show: true,
          trigger: "item",
          textStyle: {
            fontSize: 24,
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            selectedMode: "single",
            radius: [0, "50%"],
            label: {
              position: "inner",
              fontSize: 18,
            },
            labelLine: {
              show: true,
            },
            data: [
              {
                value: that.paramsEm.rightTopValue,
                name: "总数",
                itemStyle: {
                  normal: {
                    color: "#4BB5F9",
                  },
                },
              },
              {
                value: that.paramsEm.leftTopValue,
                name: "故障数",
                itemStyle: {
                  normal: {
                    color: "#FF7676",
                  },
                },
                // selected: true,
              },
            ],
          },
          {
            name: "访问来源",
            type: "pie",
            radius: ["60%", "80%"],
            labelLine: {
              length: 30,
            },
            label: {
              fontSize: 24,
              // formatter: (params)=>{
              //   return `<span>${params.value}</span>`
              // },
              formatter: "{count|{c}}\n{b}",
              borderColor: "#8C8D8E",
              rich: {
                count: {
                  color: colors[0],
                  fontSize: 26,
                },
              },
            },
            data: [
              {
                value: that.paramsEm.rightTopValue,
                name: "总数",
                itemStyle: {
                  normal: {
                    color: "rgba(3, 153, 196,.5)",
                  },
                },
              },
              {
                value: that.paramsEm.leftTopValue,
                name: "故障数",
                itemStyle: {
                  normal: {
                    color: "rgba(255, 118, 118,.5)",
                  },
                },
              },
            ],
          },
        ],
      };
      this.myEMChart.setOption(option);
    },
    //环形图--电子巡更
    hxCharts() {
      let that = this;
      if (this.myHXChart !== null) {
        this.myHXChart.dispose();
      }
      this.myHXChart = this.$echarts.init(document.getElementById("hx_main"));
      var colors = ["rgba(255, 156, 0,.7)", "rgba(0, 150, 255,.7)"];
      var option = {
        tooltip: {
          show: true,
          trigger: "item",
          textStyle: {
            fontSize: 24,
          },
        },
        label: {
          color: "#fff",
          avoidLabelOverlap: true,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["65%", "75%"],
            avoidLabelOverlap: true,
            labelLine: {
              length: 10,
              length2:30,
              show: true,
            },
            label: {
              formatter: "{count|{c}}{b}",
              borderColor: "#8C8D8E",
              rich: {
                count: {
                  color: colors[0],
                  fontSize: 24,
                },
              },
              textStyle: {
                fontSize: 24,
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "24",
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: that.paramsEl.rightTopValue,
                name: "总数",
                itemStyle: {
                  normal: {
                    color: "#4BF3F9",
                  },
                },
              },
              {
                value: that.paramsEl.leftTopValue,
                name: "遗漏数",
                itemStyle: {
                  normal: {
                    color: "#00227D",
                  },
                },
              },
            ],
          },
          {
            name: "访问来源",
            type: "pie",
            radius: ["55%", "56%"],
            avoidLabelOverlap: true,
            labelLine: {
              length: 20,
              show: true,
            },
            label: {
              show: false,
              formatter: "{b|{b}：}{c}  {per|{d}%}  ",
              borderColor: "#2B394F",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: 10,
                name: "总数",
                itemStyle: {
                  normal: {
                    color: "#333",
                  },
                },
              },
              {
                value: 0,
                name: "遗漏数",
                itemStyle: {
                  normal: {
                    color: "#333",
                  },
                },
              },
            ],
          },
        ],
      };
      let option2 = {
        // 电子巡更折线图
        title: {
          text: "时效分析",
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 24,
          },
        },
        legend: {
          data: ["遗漏数", "巡更数"],
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          axisLabel: {
              show: true,
              interval:0,  
              textStyle: {
                color: "#fff",
                fontSize: 26,
              },
            },
          boundaryGap: false,
          // data: this.data_Pe.pe_date,
          data: this.xdate,
          axisLabel: {
            textStyle: {
              fontSize: 18,
              fontWeight: "bold",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: 18,
              fontWeight: "bold",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
        },
        series: [
          {
            name: "遗漏数",
            type: "line",
            smooth: true,
            // data: this.data_Pe.omit,
            data: this.omission,
            color: "#e3a90b",
          },
          {
            name: "巡更数",
            type: "line",
            smooth: true,
            // data: this.data_Pe.total,
            data: this.normal,
            color: "#43e80e",
          },
        ],
      };
      if (this.isSwitch === "日记录") {
        this.myHXChart.setOption(option);
      } else {
        this.myHXChart.setOption(option2);
      }
    },
  },
  sockets: {
    // 闸道控制
    sendAqDzglStatus(data) {
      let aqDzglInfo = JSON.parse(data);
      this.params.leftTopValue = parseInt(aqDzglInfo.alarm);
      this.params.rightTopValue = parseInt(aqDzglInfo.total);
    },
    //闸道数量
    sendinOutCount(data) {
      let inOutCountInfo = JSON.parse(data);
      this.params.ins = inOutCountInfo.ins;
      this.params.outs = inOutCountInfo.outs;

      this.getPie();
    },
    // 紧急求助
    sendAqUrgentHelpStatus(data) {
      let aqUrgentHelpInfo = JSON.parse(data);
      this.paramsEm.leftTopValue = parseInt(aqUrgentHelpInfo.alarm);
      this.paramsEm.rightTopValue = parseInt(aqUrgentHelpInfo.total);
      this.initCharts();
    },
    // 电子巡更
    sendAqElectronicPatrolStatus(data) {
      // debugger
      let aqElectronicPatrolInfo = JSON.parse(data);
      this.paramsEl.leftTopValue = parseInt(aqElectronicPatrolInfo.alarm);
      this.paramsEl.rightTopValue = parseInt(aqElectronicPatrolInfo.total);
      this.hxCharts();
    },
    // // 电子巡更时效分析
    // sendAqDayStatistics(data) {
    //   debugger
    //   let temData = JSON.parse(data);
    //   this.data_Pe.patrolData = temData.patrolData;
    //   this.data_Pe.omitData = temData.omitData;

    //   for (let i = 0; i < this.data_Pe.patrolData.length; i++) {
    //   this.data_Pe.pe_date.push(this.data_Pe.patrolData[i].days.substring(5,10));
    //   this.data_Pe.total.push(this.data_Pe.patrolData[i].count);
    //   this.data_Pe.omit.push(this.data_Pe.omitData[i].count);
    // }
    //   this.hxCharts();
    // },
  },
};
</script>

<style>
.Bur_AlarmBottom {
  width: 4096px;
  height: 511px;
  background-color: antiquewhite;
  position: absolute;
  margin-top: 1807px;
  background: url("/static/images/bottomBackground.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.Bur_AlarmBottomcontent {
  width: 100%;
  height: calc(100% - 97px);
}
.Bur_AlarmBottomInfo {
  width: 55%;
  height: 70%;
  margin-left: 851px;
  margin-top: 113px;
  display: flex;
}
.GateControl {
  width: 33%;
  height: 100%;
}
.GateControlImg {
  width: 732px;
  height: 65px;
  background: url("../../../static/images/safety/道闸控制系统.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: -75px;
}
.GateControlProcess {
  width: 732px;
}
.GateControlContent {
  width: 732px;
  height: calc(100% - 65px);
  margin-top: 20px;
}
/* 紧急救助 */
.EmergencyAssistance {
  width: 33%;
  height: 100%;
}
.EmergencyAssistanceImg {
  width: 732px;
  height: 65px;
  background: url("../../../static/images/safety/紧急求助.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: -75px;
}
.EmergencyAssistanceProcess {
  width: 732px;
}
.EmergencyAssistanceContent {
  width: 732px;
  height: calc(100% - 65px);
  margin-top: 30px;
}
#main {
  width: 732px;
  height: 100%;
}

/* 电子巡更 */
.ElectronicPatrol {
  width: 33%;
  height: 100%;
}
.ElectronicPatrolImg {
  width: 732px;
  height: 65px;
  background: url("../../../static/images/safety/电子巡更.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: -75px;
  position: relative;
}
.ElectronicPatrolImg .cutChart {
  position: absolute;
  right: 32px;
  top: 30%;
}
.ElectronicPatrolImg .cutChart /deep/ .el-switch__core {
  width: 50px !important;
  height: 30px !important;
}
.ElectronicPatrolImg .cutChart /deep/ .el-switch__core:after {
  width: 20px !important;
  height: 20px !important;
}
.ElectronicPatrolProcess {
  width: 732px;
}
.ElectronicPatrolContent {
  width: 732px;
  height: calc(100% - 65px);
  margin-top: 30px;
}
.ep-week {
  width: 732px;
  height: 100%;
}
#hx_main {
  width: 732px;
  height: 100%;
}
#EP-week {
  width: 732px;
  height: 100%;
}
.hx_mainImg {
  position: absolute;
  width: 40px;
  height: 60px;
  background: url("../../../static/images/safety/xungeng.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 345px;
  margin-top: 65px;
}
.hx_imgText {
  width: 100px;
  font-size: 30px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
  line-height: 194px;
  margin-left: -19px;
}
</style>
